<template>
  <div class="absAi">
    <div class="absHeader">
      <span>AI摘要结果</span>
    </div>
    <el-scrollbar height="200px">
      <el-descriptions ref="detailRef" border :column="1">
        <el-descriptions-item :label="item.name" :key="index" v-for="(item, index) in arrAi">{{
          item.value
        }}</el-descriptions-item>
      </el-descriptions>
    </el-scrollbar>
  </div>
</template>

<script setup>
const props = defineProps({
  content: String
})

const arrAi = ref([])
watch(
  () => props.content,
  (val) => {
    if (val) {
      try {
        const obj = JSON.parse(val)
        const res = Object.entries(obj).map(([key, value]) => ({
          name: key,
          value: value
        }))
        arrAi.value = res
      } catch {
        arrAi.value = []
      }
    }
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.absAi {
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .absHeader {
    height: 40px;
    display: flex;
    align-items: center;
    color: #172b4d;
    font-size: 14px;
    font-weight: 400;
  }
}
::v-deep .el-descriptions__label {
  width: 120px !important;
  font-size: 12px !important;
}
::v-deep .el-descriptions__content {
  font-size: 12px !important;
}
</style>
